<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
             class="demo-ruleForm login-container">
      <h3 class="title">用户注册</h3>

      <el-form-item prop="username">
        <el-input type="text" size="large" v-model.trim="ruleForm.username" auto-complete="off" placeholder="账号"
                  maxlength="60">
          <template #prepend>
            <el-icon>
              <user-filled/>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" size="large" v-model.trim="ruleForm.password" auto-complete="off" placeholder="密码"
                  maxlength="60">
          <template #prepend>
            <el-icon>
              <lock/>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input type="password" size="large" v-model.trim="ruleForm.confirmPassword" auto-complete="off"
                  placeholder="确认密码"
                  maxlength="60">
          <template #prepend>
            <el-icon>
              <lock/>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input v-model.trim="ruleForm.phone" size="large" auto-complete="off" placeholder="请输入手机号">
            <template #prepend>
              <el-icon><Iphone /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model.trim="ruleForm.code" auto-complete="off" placeholder="请输入验证码">
          <template #prepend>
                <el-icon ><circle-check /></el-icon>
              </template>
          <template #append>
            <el-button type="primary"  size="large" :disabled="!ruleForm.phone" @click="handleSendVerificationCode">{{
            verificationCodeBtnText
          }}
        </el-button>
          </template>
        </el-input>


      </el-form-item>

      <el-form-item style="width:100%;margin-top: 10px">
        <el-button type="primary" size="large" :loading="loadingLg" style="width:100%;" @click="submitForm('ruleForm')">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'login',
  data() {
    return {
      loadingLg: false,
      logining: false,
      rememberpassword: false,
      verificationCodeBtnText: '获取验证码',
      ruleForm: {
        username: '',
        password: '',
        captcha: '',
        confirmPassword: '',
        phone: '',
        code: '',
        captchaKey: null,
      },
      loginFlag: false,
      rules: {
        username: [{required: true, message: '请输入账号', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        confirmPassword: [{required: true, message: '请再次输入密码', trigger: 'blur'}],
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
      },
      image_base: null,
      allmenu: []
    }
  },
  created() {
    //动态添加该页面meta viewport 手机适配
    if (document.querySelector("meta[name='viewport']")) {
      document.querySelector("meta[name='viewport']")["content"] = "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    }
    // //请求数据，预留

  },
  beforeRouteLeave(to, form, next) {
    //离开页面去除动态添加该页面meta viewport 手机适配
    document.querySelector("meta[name='viewport']")["content"] = this.getCurrentWith()
    next()
  },
  methods: {
    getCurrentWith() {
      var designWidth = 375;
      var deviceWidth = parseInt(window.screen.width) || parseInt(document.documentElement.clientWidth);  //获取当前设备的屏幕宽度
      // var deviceScale = deviceWidth/designWidth;
      var deviceScale = 0.6;
      var ua = navigator.userAgent;
      //获取当前设备类型（安卓或苹果）

      if (ua && /Android (\d+.\d+)/.test(ua)) {
        // +",user-scalable=no"
        return "width=680,initial-scale=" + deviceScale + ",minimum-scale=" + deviceScale + ",maximum-scale=" + deviceScale;
      } else if (ua && /iPhone|ipad|ipod|ios/.test(ua)) {
        return "width=680,initial-scale=" + deviceScale + ",minimum-scale=" + deviceScale + ",maximum-scale=" + deviceScale;
      } else {
        return '';
      }
    },
        handleSendVerificationCode() {
      // 在这里执行发送验证码逻辑，例如调用后端 API
      console.log('发送验证码')
      this.verificationCodeBtnDisabled = true
      let countDown = 60
      this.verificationCodeBtnText = `${countDown}s`
      this.verificationCodeInterval = setInterval(() => {
        countDown--
        if (countDown > 0) {
          this.verificationCodeBtnText = `${countDown}s`
        } else {
          clearInterval(this.verificationCodeInterval)
          this.verificationCodeBtnText = '重新发送'
          this.verificationCodeBtnDisabled = false
        }
      }, 1000)
    },
    handleSubmit() {
      // 在这里执行用户注册逻辑，例如调用后端 API
      console.log('提交注册表单')
    }
  },
  beforeDestroy() {
    clearInterval(this.verificationCodeInterval)

  }
}


</script>

<style lang="scss">
.login-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
 
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
  display: flex;
  align-items: center;

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: var(--el-bg-color);
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }
}

.market-login {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);

  .login-container1 {
    width: 510px;
    margin-left: 95px;

    .login-img {
      width: 500px;
    }

    .title {
      font-size: 48px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #0072FF;
      line-height: 67px;
      letter-spacing: 1px;
      margin: 60px auto 72px;
    }

    .el-form-item {
      margin-bottom: 72px;

      input {
        padding: 0;
        text-indent: 0;
        margin-top: 20px;
      }

      .el-form-item__label {
        font-size: 20px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.56);
        line-height: 28px;
      }
    }

    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
      content: ''
    }

    .el-input__inner {
      border: 0 !important;
      border-bottom: 2px solid rgba(0, 0, 0, 0.16) !important;
      border-radius: 0;
      font-size: 24px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.84);
    }

    .el-input {
      position: relative;
    }

    .el-input:after {
      position: absolute;
      content: '';
      width: 0;
      height: 2px;
      left: 0;
      bottom: 3px;
      z-index: 2;
      transition: all 0.5s;
      background: #0072FF;
    }

    .el-input.hasTxt:after {
      width: 100%;

      .el-input__inner {
        border-right: 0 !important;
      }
    }

    .loadingLg {
      width: 100%;
      height: 72px;
      background: #0072FF;
      box-shadow: 0px 5px 15px 0px rgba(0, 114, 255, 0.25);
      border-radius: 4px;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}

@media screen and (max-width: 1600px) {
  .market-login {
    width: 1050px;

    .login-img {
      width: 350px;
    }

    .login-container1 {
      .el-form-item {
        margin-bottom: 50px;
      }

      .title {
        margin: 40px auto;
      }
    }
  }
}

.login-code {
  height: 40px - 2px;
  display: block;
  margin: 0px -20px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
</style>